<template>
	<view class="container">
		<view class="title">点击卡片去聊天</view>
		<view @click="getChat(user)" class="like-item" v-for="(user, index) in likeList" :key="index">
			<image mode="aspectFill" :src="user.imgurl" class="avatar"></image>
			<view>
				<text class="username">{{ user.username }}</text>
				<text class="signature">{{ user.signature }}</text>
				<text class="city">{{ user.city }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config';
	export default {
		data() {
			return {
				likeList: []
			};
		},
		methods: {
			onLoad() {
				const that = this
				uni.request({
					url: config.baseUrl + 'person/myLike',
					method: 'POST',
					data: {
						"openid": this.$global.personInfo.openid
					},
					success: (res) => {
						// console.log(res.data);
						that.likeList = res.data
						for (let i = 0; i < that.likeList.length; i++) {
							that.likeList[i].imgurl = config.baseUrl + that.likeList[i].imgurl
						}
						// console.log(that.likeList);
					}
				})
			},
			getChat(user) {
				console.log(user);
				uni.request({
					url: config.baseUrl + 'chat/getChat',
					method: 'POST',
					data: {
						senderId: this.$global.personInfo.openid,
						toId: user.openid,
						message: 'hello!(默认消息)'
					},
					success: (res) => {
						console.log(res);
						if (res.data.state == 'ok') {
							uni.showToast({
								title: '快去聊天吧!',
								icon: 'success'
							})
						}
					}
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		height: 90vh;
		background: linear-gradient(to bottom, #FFDAB9, #FFF8DC);
		/* 从上往下变淡的橘色渐变 */
		background: linear-gradient(to right, #FFDAB9, #FFF8DC);
		/* 从左往右变淡的橘色渐变 */
	}

	.title {
		display: flex;
		justify-content: center;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.like-item {
		border-radius: 15rpx;
		padding: 15rpx;
		background: linear-gradient(to right, #fffec6, #FFF8DC);
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		border-bottom: 1rpx solid #c7c7c7;
		box-shadow: 5rpx 16rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.username {
		font-size: 16px;
		font-weight: bold;
	}

	.signature {
		margin-left: 50rpx;
		font-size: 14px;
		color: #666;
	}

	.city {
		margin-left: 50rpx;
		font-size: 14px;
		color: #666;
	}
</style>